import React, { Component } from 'react'

export default class Count extends Component {
  constructor() {
    super()
    // 定义状态
    // 注意: 并不是所有的数据,都要写在状态中. 需要在页面上渲染的数据,才应该写在状态中
    this.state = {
      count: 0,
      msg: '我给你一百万',
    }
  }

  handle() {
    this.setState({
      count: this.state.count + 1,
      msg: '我不给了',
    })
  }

  render() {
    // 注意: render组件中的this,一定是当前组件实例

    return (
      <div>
        <div id="box">{this.state.count}</div>
        <div>{this.state.msg}</div>
        <button
          onClick={() => {
            // 这个this是render中的this. 优点: handle函数只在原型中创建了一个
            this.handle()
          }}
        >
          +
        </button>
      </div>
    )
  }
}
